<template>
  <div>
    <div class="topBoxEmpty"></div>
    <div class="topBox">
        <four-steps :step="3" ref="changeStep"></four-steps>
    </div>
    <div class="titleTab">
        <span class="title">装修用材明细</span>
        <div class="tabBox">
            <span :class="tabIdx==index?'tab active':'tab'"
                v-for="(item,index) in 10"
                :key = "index"
                @click="cutTab(index)"
            >门厅</span>
        </div>
    </div>
    <div class="listBox"
        v-for="(item,index) in 10"
        :key = "index"
    >
        <img class="leftImg" src="@/assets/images/test2.jpg" alt="">
        <div class="right">
            <span class="txt1">都芳亚光墙顶漆</span>
            <span class="txt2">瑞士卢森宜家系列强化地板</span>
            <span class="txt3">型号：ZB0001（2000017456）</span>
        </div>
    </div>
    <div class="botEmp"></div>
  </div>
</template>

<script>
import FourSteps from "./components/FourSteps";
import utils from "@/assets/scripts/utils";
export default {
  name: "fitmentDetails",
  components: {
    FourSteps
  },
  data() {
    return {
        tabIdx:0
    };
  },
  methods: {
      cutTab(res){
          this.tabIdx = res;
      }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.changeStep.changeStep(3)
    })
  },
};
</script>

<style lang="stylus" scoped>
.botEmp
    height 120px
.topBoxEmpty
    height 383px
.topBox
    position fixed
    left 0
    top 0
    width 100%
    z-index 66
    height 233px
    box-shadow 0 0 10px 2px #f4f4f4
    box-sizing border-box
    padding-top 62px
    display flex
    flex-direction column
    align-items center
    margin-bottom 15px
    background url(../../assets/images/bg3.jpg)
    background-size 100% 100%
.titleTab
    width 100%
    height 150px
    display flex
    align-items center
    flex-direction column
    position fixed
    left 0
    top 233px
    z-index 1
    color #333333
    box-sizing border-box
    padding-top 30px
    background #ffffff
    .title
        line-height 30px
        font-size 30px
        letter-spacing 3px
        margin-bottom 30px
    .tabBox
        width 628px
        height 60px
        font-size 24px
        color #666666
        line-height 60px
        white-space nowrap
        overflow-x scroll
        .tab
            display inline-block
            padding 0 25px
        .active{
            color #000000
            font-size 26px
            font-weight bold
        }
    .tabBox::-webkit-scrollbar
        width: 0;
        height: 0;
        color: transparent;
.listBox
    width 700px
    height 230px
    margin 0 auto
    color #333333
    border-bottom 1px solid #f3f3f3;/*no*/
    display flex
    align-items center
    .leftImg
        width 230px
        height 170px
        margin 0 20px 0 36px
    .right
        display flex
        flex-direction column
        justify-content center
        .txt1
            line-height 26px
            font-size 26px
            font-weight bold
            letter-spacing 1px
            margin-bottom 18px
        .txt2,.txt3
            line-height 22px
            font-size 22px
            color #666666
            letter-spacing 1px
        .txt2
            margin-bottom 22px
            

</style>